<template>
  <div class="yaokongDialog">
		<div class="baseInfo">
			<h3 class="title">一般信息</h3>
			<p>
				<label>厂站：</label>
				<el-input v-model="newcurrentSelectMenuItemObj.yaokongObj.title" size="small" disabled></el-input>
			</p>
			<p>
				<label>测点：</label>
				<el-input v-model="newcurrentSelectMenuItemObj.yaokongObj.measurePoint" size="small" disabled></el-input>
			</p>
		</div>
		<div class="controlType">
			<h3 class="title">控制方式</h3>
			<el-radio-group v-model="newcurrentSelectMenuItemObj.yaokongObj.state" @change="saveInfo">
				<el-radio v-for="item in controlType" :key="item.value" :label="item.value">{{item.label}}</el-radio>
			</el-radio-group>
		</div>
		<div class="remoteControlSet" v-if="newcurrentSelectMenuItemObj.type!=='ruanyaban'">
			<h3 class="title">遥控设置</h3>
			<div class="setctn">
				<div class="controlNo">
					<label>控制编号</label>
					<el-radio-group v-model="selectType" @change="changeSelect">
						<el-radio  label="手动输入">手动输入</el-radio>
						<el-radio  label="自动输入">自动输入</el-radio>
					</el-radio-group>
					<br>
					<el-input v-model="newcurrentSelectMenuItemObj.yaokongObj.controlNo" size="small" @change="checkHandle"></el-input>
				</div>
				<div class="errorProofVerification">
					<el-checkbox v-model="errorProofVerification">防误校验</el-checkbox>
				</div>
			</div>
		</div>
		<div class="controlTextArea">
			<h3 class="title">控制信息</h3>
			<el-input type="textarea" :rows="3" resize="none"  v-model="text" disabled></el-input>
		</div>
  </div>
</template>

<script>
import ScaleBox from "@/components/ScaleBox/ScaleBox.vue";

export default {
  name: "yaokongDialog",
	props: {
		currentSelectMenuItemObj: {
			type: Object, // 或者不写
		},
		text: {
			type: String, // 或者不写
		}
	},
	data() {
    return {
			newcurrentSelectMenuItemObj: this.currentSelectMenuItemObj,
			selectType:'手动输入',
			// 控制方式
      controlType: [
				{value:1, label: '控合'},
				{value:0, label: '控分'},
			],
			radio: '1',
			controlNo: '1',
			errorProofVerification: true,

    };
  },
  methods: {
		changeSelect() {
			if (this.selectType === '手动输入') {
				this.$set(this.newcurrentSelectMenuItemObj.yaokongObj, 'controlNo', '');
			} else {
				this.$set(
						this.newcurrentSelectMenuItemObj.yaokongObj,
						'controlNo',
						this.newcurrentSelectMenuItemObj.yaokongObj.measurePoint
				);
				this.$store.commit('canHandle',true)
			}
		},
    saveInfo() {
			this.$store.commit('yaokongstate',this.newcurrentSelectMenuItemObj.yaokongObj.state)
    },
		checkHandle() {
			if (this.newcurrentSelectMenuItemObj.type!=='ruanyaban'){
				if (this.newcurrentSelectMenuItemObj.yaokongObj.controlNo===this.newcurrentSelectMenuItemObj.yaokongObj.measurePoint){
					this.$store.commit('canHandle',true)
				}else{
					this.$store.commit('canHandle',false)
				}
			}else{
				this.$store.commit('canHandle',true)
			}

		}
  },
  mounted() {
		this.saveInfo();
		this.checkHandle();
  },
	watch: {
		currentSelectMenuItemObj: {
			handler(newValue) {
				this.newcurrentSelectMenuItemObj = JSON.parse(JSON.stringify(newValue));
        this.newcurrentSelectMenuItemObj.yaokongObj.state = this.newcurrentSelectMenuItemObj.yaokongObj.state === 1 ? 0 : 1;
				this.$store.commit('yaokongstate',this.newcurrentSelectMenuItemObj.yaokongObj.state);
				this.selectType='手动输入'
			},
			deep:true,
			immediate: true
		}
	}
};
</script>

<style lang="less" scoped>
	.yaokongDialog{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		overflow: scroll;
		margin: 10px 0;
		border: 1px solid #656a73;
		padding: 10px 20px;
		box-sizing: border-box;
		color:#dee2e5;
		& > div + div{
			margin-top: 30px;
		}
		 .baseInfo{
			flex: 1;
			.title{
				font-size: 14px;
				font-weight: 600;
				margin-bottom: 10px;
			}
			& > p + p{
				margin-top: 10px;
			}
			& > p{
				display: flex;
				align-items: center;
				& > label{
					font-size: 14px;
					width: 60px;
					text-align: right;
				}
				/deep/			.el-input{
					font-size: 14px;
					flex: 1;
					overflow: hidden;
					.el-input__inner{
						background:transparent;
						border: 1px solid #666;
					}
				}
			}
		}
	 .controlType{
			flex: 1;
			.title{
				font-size: 14px;
				font-weight: 600;
				margin-bottom: 10px;
			}
			.el-radio-group{
				margin-left: 20px;
				/deep/	.el-radio{
					margin-right: 100px;
					.el-radio__label{
						color:#dee2e5;
						font-size: 14px;
					}
				}
			}
		}
	 .remoteControlSet{
			flex: 1;
			.title{
				font-size: 14px;
				font-weight: 600;
				margin-bottom: 10px;
			}
			.setctn{
				display: flex;
				align-items: center;
				.controlNo{
					flex:1;
					display: flex;
					align-items: center;
					overflow: hidden;
					margin-right: 20px;
					& > label{
						font-size: 14px;
						width: 75px;
						text-align: right;
						margin-right: 10px;
					}
					/deep/		.el-input{
						flex: 1;
						overflow: hidden;
						font-size: 14px;
						.el-input__inner{
							color:#dee2e5;
							background:transparent;
							border: 1px solid #666;
						}
					}
				}
				.el-checkbox__label{
					color:#dee2e5;
				}
				.errorProofVerification{

				}
			}
		}
	 .controlTextArea{
			flex: 1;
			.title{
				font-size: 14px;
				font-weight: 600;
				margin-bottom: 10px;
			}
		 /deep/ .el-textarea__inner{
				color:#dee2e5;
				background:transparent;
				border: 1px solid #666;
			}
		}
	}
</style>
